<template>
  <ServiceNav/>
  <div class="home">
    
    <div class="header">
      <div class="breadDiv">
        <span>您的位置：</span>
        <span>版权存证</span>
      </div>
      <div class="stepBox">
        <StepItem
          v-for="(step, index) in steps"
          :key="index"
          :step="step"
          :current="current === index + 1"
        />
      </div>
    </div>
    <div class="main">
      <span class="subtitle">存证名称：</span>
      <el-input
        v-model="workname"
        placeholder="请输入存证名称"
        class="input-field"
      />
      <span class="subtitle">上传文件：</span>
      <el-upload
        class="upload-demo"
        drag
        action=""
        multiple
        :before-upload="beforeUpload"
        v-loading="uploading"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或<em style="color: #53b7d7">点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <p>温馨提示：</p>
          <p>
            请仔细阅读<span @click="shouldKonw(2)" style="cursor: pointer; color: #53b7d7">《用户文件上传协议》</span>，遵守相关法律法规，严禁上传违规、违禁内容；
          </p>
          <p>支持批量存证，单个文件大小不超过2G，单次最多上传20个文件。</p>
        </div>
      </el-upload>
      <div class="fileList">
        <div v-for="(item, index) in insertList" :key="index" class="file-item">
          <img
            :src="item.fileUrl"
            alt=""
            v-if="item.mimeType === 'image/jpeg' || item.mimeType === 'image/png' || item.mimeType === 'image/jpg'"
            class="fileImg"
          />
          <img src="@/assets/notImage.png" alt="" v-else class="fileImg" />
          <p class="file-name">
            <span>{{ item.fileName.slice(0, 8) }}</span>
            <span v-if="item.fileName.length > 8">...</span>
          </p>
          <div class="cover">
            <img
              src="@/assets/delete.png"
              alt=""
              class="delete"
              @click="deleteRow(index)"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="situation">
      <span class="subtitle">存证情况：</span>
      <el-radio v-model="situation" label="self" border>我为自己存证</el-radio>
      <el-radio v-model="situation" label="other" border>代他人存证</el-radio>
      <el-button
        type="primary"
        class="smallBtn"
        v-if="situation === 'other'"
        @click="chooseAuthor"
      >
        选择著作权人
      </el-button>
      <div class="situationBox" v-if="targetList.length > 0">
        <div v-for="(item, index) in targetList" :key="index">
          <div>姓名或企业名称：{{ item.ownerName }}</div>
          <div>证件类型：{{ getDicValue(item.cardType, authorIdTypeList) }}</div>
          <div>证件号码：{{ item.idNo }}</div>
          <el-button type="danger" size="mini" @click="deleteShowAuthor(index)">删除</el-button>
        </div>
      </div>
    </div>
    <div class="section">
      <p>联合保障：</p>
      <div class="content">
        <div>
          <img src="@/assets/detail_3.png" alt="" />
          <p>权威区块链存证</p>
          <div class="content">
            区块链存证平台运行于中国信通院牵头建设的国家级区块链基础设施“星火·链网”超级节点，采用国密算法，确保链上数据稳定运行、真实可信且安全可靠。
          </div>
        </div>
        <div>
          <img src="@/assets/detail_2.png" alt="" />
          <p>国家授时中心</p>
          <p>可信时间戳认证</p>
          <div class="content">
            可信时间戳有效证明了数据电文（电子文件）产生的时间及内容完整性。按照《中华人民共和国电子签名法》第二章第五条的的有关规定，申请了国家授时中心可信时间戳的数据电文具有法律法规规定的原件形式要求。
          </div>
        </div>
        <div>
          <img src="@/assets/detail_1.png" alt="" />
          <p>司法认证</p>
          <div class="content">
            作品信息即时同步互联网法院司法区块链，提升存证司法效力。
          </div>
        </div>
      </div>
    </div>
    <div class="discount">
      <span class="subtitle">优惠码：</span>
      <el-radio v-model="discount" label="no" border>不使用优惠码</el-radio>
      <el-radio v-model="discount" label="yes" border>使用优惠码</el-radio>
      <div class="situationBox" v-if="discountBox">
        <el-input
          style="width: 305px"
          v-model="discountCode"
          placeholder="请输入优惠码"
          @blur="checkCode"
        />
        <span class="effective" v-if="effective && show">
          <i class="el-icon-check"></i>优惠码有效
        </span>
        <span class="noEffective" v-if="!effective && show">
          <i class="el-icon-close"></i>优惠码无效
        </span>
      </div>
    </div>
    <div class="discount">
      <span class="subtitle" style="float: left; margin-top: 8px">验证码：</span>
      <el-input v-model="code" placeholder="请输入验证码" class="code">
        <el-button slot="append" @click="sendCode" :disabled="sending">{{ content }}</el-button>
      </el-input>
    </div>
    <div class="save">
      <div class="foot">
        <el-checkbox v-model="ifRead"></el-checkbox>
        我已阅读<span style="cursor: pointer; color: #53b7d7" @click="shouldKonw(2)">《用户文件上传协议》</span>，同意并自愿遵守协议内容
      </div>
      <el-button class="btn" type="primary" @click="insert" :disabled="submitStatus">
        立即存证
      </el-button>
      <p class="howmuch">
        待支付：<span>{{ totalPrice }}</span> 元
        <span>单价:10元/文件</span>
      </p>
    </div>
    <!-- 选择著作权人 -->
    <el-dialog
      title="选择著作权人"
      :visible.sync="chooseAuthorVisible"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-button type="primary" size="small" @click="insertAuthor" class="insertBtn smallBtn">添加著作权人</el-button>
      <el-table
        :data="options"
        style="width: 100%"
        :header-cell-style="{ background: 'rgb(245,247,250)' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="ownerName" label="姓名或企业名称" width="250"></el-table-column>
        <el-table-column label="证件类型" width="150">
          <template slot-scope="scope">
            <span>{{ getDicValue(scope.row.cardType, authorIdTypeList) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="idNo" label="证件号码"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger" class="btnColor" size="mini" @click="deleteAuthor(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="chooseAuthorVisible = false" type="primary" plain>取 消</el-button>
        <el-button size="small" type="primary" class="smallBtn" @click="saveAuthor">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增著作权人 -->
    <el-dialog
      title="添加著作权人"
      :visible.sync="authorVisible"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="authorForm"
        :rules="rules"
        ref="authorForm"
        label-width="140px"
        style="width: 90%"
        class="demo-ruleForm"
      >
        <el-form-item label="证件类型：" prop="cardType">
          <el-select
            class="type"
            v-model="authorForm.cardType"
            placeholder="请选择证件类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in authorIdTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名或企业名称：" prop="ownerName">
          <el-input
            v-model="authorForm.ownerName"
            placeholder="请输入姓名或企业名称"
          />
        </el-form-item>
        <el-form-item label="证件号码：" prop="idNo">
          <el-input
            v-model="authorForm.idNo"
            placeholder="请输入证件号码"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="authorVisible = false" type="primary" plain>取 消</el-button>
        <el-button size="small" type="primary" :disabled="ownerSubmit" class="smallBtn" @click="insertOwners('authorForm')">确 定</el-button>
      </span>
    </el-dialog>
    <Footer />
  </div>
</template>

<script>
import Nav from "@/components/Nav.vue";
import Footer from "@/components/Footer.vue";
import ServiceNav from "@/components/ServiceNav.vue";
// import { queryIsIdentify } from "@/http/api";
// import request from "@/http/request";
// import {
//   unitiedUpload,
//   uploadToServer,
//   insertEvidence,
//   getDict,
//   insertEvidenceOwner,
//   queryEvidenceOwner,
//   queryDiscountCode,
//   deleteEvidenceOwner,
//   getIdentifyInfo,
// } from "./api/index";

export default {
  components: {
    Nav,
    Footer,
  },
  data() {
    return {
      code: "",
      content: "发送验证码",
      sending: false,
      workname: "",
      insertList: [],
      uploading: false,
      ifLogin: false,
      current: 1,
      ifRead: false,
      submitStatus: false,
      situation: "self",
      situationBox: false,
      authorList: [],
      targetList: [],
      options: [],
      authorVisible: false,
      authorForm: {},
      rules: {
        cardType: [
          {
            required: true,
            message: "请选择证件类型",
            trigger: "change",
          },
        ],
        ownerName: [
          {
            required: true,
            message: "请输入姓名或企业名称",
            trigger: "change",
          },
        ],
        idNo: [
          {
            required: true,
            message: "请输入证件号码",
            trigger: "change",
          },
        ],
      },
      authorIdTypeList: [],
      discount: "no",
      discountBox: false,
      discountCode: "",
      ownerSubmit: false,
      effective: true,
      show: false,
      totalPrice: 0,
      chooseAuthorVisible: false,
    };
  },
  created() {
    this.insertList = [];
    // 证件类型
    // getDict("worksInstAuthorIdType").then((res) => {
    //   this.authorIdTypeList = res.data.data;
    // });
    // let data = {
    //   val: "copyright",
    //   num: 0,
    // };
    // queryDiscountCode(data).then((res) => {
    //   this.totalPrice = res.data.data;
    // });
  },
  mounted() {
    //判断是否登录
    let hasToken =
      this.$getStore({
        name: "token",
      }) || "";
    this.ifLogin = hasToken ? true : false;
    //判断是否实名认证
    queryIsIdentify().then((res) => {
      if (res.data.code == 1) {
        setTimeout(() => {
          this.$confirm("当前未实名认证，请前往实名认证页面认证", "提示", {
            confirmButtonText: "个人认证",
            cancelButtonText: "企业认证",
            type: "warning",
          })
            .then(() => {
              sessionStorage.setItem("nowMenu", "8-2");
              sessionStorage.setItem("nowTitle", "实名认证个人");
              sessionStorage.setItem("nowPath", "/authenticationPerson");
              this.$router.push("/userCenter/page/index");
            })
            .catch(() => {
              sessionStorage.setItem("nowMenu", "8-3");
              sessionStorage.setItem("nowTitle", "实名认证企业");
              sessionStorage.setItem("nowPath", "/authenticationCom");
              this.$router.push("/userCenter/page/index");
            });
        }, 1000);
      }
    });
  },
  methods: {
    //上传须知
    shouldKonw(id) {
      let routeUrl = this.$router.resolve({
        path: "/aboutUs/userAgreement/" + id,
      });
      window.open(routeUrl.href, "_blank");
    },
    //上传
    async beforeUpload(file) {
      this.uploading = true;
      let md5 = await this.$transportFile(file);
      const formData = {
        attachmentObjectTypeCode: "sampleFiless",
        fileSize: file.size,
        md5: md5,
        originalFilename: file.name,
        isEncryption: true,
      };
      unitiedUpload(formData).then((res) => {
        let url = res.data.data.presignedUploadUrl;
        let md5Base64 = res.data.data.md5Base64;
        if (res.data.code == 0) {
          uploadToServer(url, md5Base64, file, res.data.data.mimeType).then(
            (resp) => {
              this.uploading = false;
              if (resp.status == 200) {
                if (this.insertList.length < 20) {
                  this.insertList.push(res.data.data);
                  this.checkCode();
                } else {
                  this.$notify({
                    title: "提示",
                    message: "上传文件数量不能超过20个",
                  });
                  return;
                }
              } else {
                this.$notify({
                  title: "提示",
                  message: "上传失败",
                });
              }
            }
          );
        } else {
          this.uploading = false;
          this.$notify({
            title: "提示",
            message: "上传失败",
          });
        }
      });
      return false;
    },
    //提交
    insert() {
      this.submitStatus = true;
      if (!this.ifLogin) {
        this.$notify({
          title: "提示",
          message: "当前用户未登录，请登录后存证",
        });
        this.submitStatus = false;
        this.$router.push(`/login/page/index?status=login`);
        return;
      }
      if (!this.workname) {
        this.$notify({
          title: "提示",
          message: "请输入存证名称",
        });
        this.submitStatus = false;
        return;
      }
      if (this.insertList.length <= 0) {
        this.$notify({
          title: "提示",
          message: "请上传文件",
        });
        this.submitStatus = false;
        return;
      }
      if (this.situation == "other") {
        if (this.targetList.length <= 0) {
          this.$notify({
            title: "提示",
            message: "请选择著作权人",
          });
          this.submitStatus = false;
          return;
        }
      }
      if (!this.code) {
        this.$notify({
          title: "提示",
          message: "请输入验证码",
        });
        this.submitStatus = false;
        return;
      }
      if (this.discount == "yes") {
        if (!this.discountCode) {
          this.$notify({
            title: "提示",
            message: "请填写优惠码",
          });
          this.submitStatus = false;
          return;
        }
      }
      if (!this.effective) {
        this.$notify({
          title: "提示",
          message: "优惠码无效",
        });
        this.submitStatus = false;
        return;
      }
      if (!this.ifRead) {
        this.$notify({
          title: "提示",
          message: "请勾选协议",
        });
        this.submitStatus = false;
        return;
      }
      let attachIds = [];
      this.insertList.map((e) => {
        attachIds.push({
          fileId: e.attachId,
          fileName: e.fileName,
          fileSize: e.fileSize,
        });
      });
      let authorIds = [];
      this.authorList.map((e) => {
        authorIds.push({
          ownerName: e.ownerName,
          idNo: e.idNo,
          cardType: e.cardType,
          id: e.id,
        });
      });
      const data = {
        attachIds: attachIds,
        workName: this.workname,
        returnUrl: window.location.origin + "/copyrightListing",
        selfOrOther: this.situation == "self" ? true : false,
        owners: authorIds,
        phone: this.phone,
        smsCode: this.code,
        mobileOrPc: false,
        discountFlag: this.discount == "yes" ? true : false,
        discountCode: this.discountCode,
      };
      insertEvidence(data).then((res) => {
        if (res.data.code == 1) {
          this.$notify({
            title: "提示",
            message: res.data.msg,
          });
          this.submitStatus = false;
          return;
        }
        sessionStorage.setItem("nowMenu", "0");
        sessionStorage.setItem("nowTitle", "存证列表");
        sessionStorage.setItem("nowPath", "copyrightListing");
        const div = document.createElement("div");
        div.id = "alipay";
        div.innerHTML = res.data;
        document.body.appendChild(div);
        document.querySelector("#alipay").children[0].submit();
      });
    },
    //删除文件
    deleteRow(index) {
      this.insertList.splice(index, 1);
      this.checkCode();
    },
    //选择著作权人
    chooseAuthor() {
      this.chooseAuthorVisible = true;
      this.queryOwner();
    },
    //添加著作权人
    insertAuthor() {
      this.authorVisible = true;
      this.authorForm = {};
    },
    //查询著作权人
    queryOwner() {
      const data = {
        current: 1,
        size: 1000,
      };
      queryEvidenceOwner(data).then((res) => {
        this.options = res.data.data.records;
      });
    },
    //保存新增著作权人
    insertOwners(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = {
            cardType: this.authorForm.cardType,
            ownerName: this.authorForm.ownerName,
            idNo: this.authorForm.idNo,
          };
          this.ownerSubmit = true;
          insertEvidenceOwner(data).then((res) => {
            this.ownerSubmit = false;
            if (res.data.code == 0) {
              this.$notify({
                title: "提示",
                message: "新增成功",
              });
              this.authorVisible = false;
              this.queryOwner();
            } else {
              this.$notify({
                title: "提示",
                message: res.data.msg,
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    //查询优惠码
    checkCode() {
      let num = "";
      if (!this.discountCode) {
        num = "copyright";
      } else {
        num = this.discountCode;
      }
      let data = {
        val: num,
        num: this.insertList.length,
      };
      queryDiscountCode(data).then((res) => {
        if (res.data.data == null) {
          this.effective = false;
          this.show = true;
        } else {
          this.totalPrice = res.data.data;
          if (this.discountCode) {
            this.show = true;
            this.effective = true;
          } else {
            this.show = false;
            this.effective = true;
          }
        }
      });
    },
    // 获取字典中文
    getDicValue(val, target) {
      let dicName;
      if (val) {
        val = val.toString();
      }
      if (!target) {
        return false;
      }
      target.map((e) => {
        if (val == e.value) {
          dicName = e.label;
        }
      });
      return dicName;
    },
    //删除著作权人
    deleteAuthor(item) {
      this.$confirm("此操作将永久删除该著作权人, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteEvidenceOwner(item.id).then((res) => {
            if (res.data.code == 0) {
              this.$notify({
                title: "提示",
                message: "删除成功",
              });
              this.queryOwner();
            } else {
              this.$notify({
                title: "提示",
                message: res.data.msg,
              });
            }
          });
        })
        .catch(() => {});
    },
    //多选著作权人
    handleSelectionChange(val) {
      this.authorList = val;
    },
    //保存著作权人
    saveAuthor() {
      if (this.authorList.length <= 0) {
        return;
      }
      this.targetList = [];
      this.authorList.map((e) => {
        this.targetList.push(e);
      });
      this.chooseAuthorVisible = false;
    },
    //删除选择的著作权人
    deleteShowAuthor(index) {
      this.targetList.splice(index, 1);
    },
    //发送验证码
    sendCode() {
      getIdentifyInfo().then((res) => {
        this.phone = res.data.data.phone;
        if (res.data.data.phone) {
          request({
            url: "/admin/fileEvidence/mobile/2",
            method: "get",
          }).then((response) => {
            if (response.data.data) {
              this.$message.success("验证码发送成功");
              this.content = 60;
              this.sending = true;
              let timer = setInterval(() => {
                if (this.content == 0) {
                  clearInterval(timer);
                  this.sending = false;
                  this.content = "发送验证码";
                } else {
                  this.content--;
                }
              }, 1000);
            } else {
              this.$message.error(response.data.msg);
            }
          });
        }
      });
    },
  },
  destroyed() {},
  watch: {
    situation: function (val, oldval) {
      if (val == "other") {
        this.situationBox = true;
      } else {
        this.situationBox = false;
        this.targetList = [];
      }
    },
    discount: function (val, oldval) {
      if (val == "yes") {
        this.discountBox = true;
        this.discountCode = "";
      } else {
        this.discountBox = false;
        this.discountCode = "";
        this.show = false;
        let data = {
          val: "copyright",
          num: this.insertList.length,
        };
        queryDiscountCode(data).then((res) => {
          this.totalPrice = res.data.data;
        });
      }
    },
    discountCode: function (val, oldval) {
      if (val.length == 0) {
        this.effective = true;
        this.show = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>

.effective {
  font-size: 12px;
  color: #67c23a;
  margin-left: 10px;
}

.noEffective {
  font-size: 12px;
  color: #f56c6c;
  margin-left: 10px;
}

.home {
  padding-top: 0 !important;
  background-color: #f9f9f9; // 使用更浅的背景色
}

.header {
  width: 100%;
  height: 0px;
  background-color: #32353d;

  .breadDiv {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    position: relative;

    > span {
      line-height: 60px;
      color: white;
      font-size: 14px;
      margin-right: 20px;
    }
  }

  .stepBox {
    width: 1200px;
    margin: 0 auto;
    height: 190px;
    display: flex;
    background-color: #f0f0f0; // 使用扁平化的背景色

    > div {
      position: relative;
      width: 20%;
      height: 100%;
      text-align: center; // 中心对齐

      > img:nth-child(1) {
        margin-top: 50px;
      }

      .title {
        margin-top: 10px; // 增加标题的上边距
        color: #333; // 使用深色字体
        font-weight: bold;
        font-size: 16px;
      }

      .fontRed {
        color: #fe3a29;
      }

      .line {
        width: 70px;
        height: 2px;
        background-color: #ccc; // 使用浅色线条
        opacity: 0.5;
        margin: 10px auto; // 使用 margin 进行居中
      }
    }
  }
}

.main {
  width: 1140px;
  margin: 0 auto;
  padding: 30px;
  background-color: white;
  margin-top: 30px;
  border-radius: 4px; // 添加圆角
  box-shadow: none; // 去掉阴影

  .subtitle {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px; // 增加下边距
  }

  .fileList {
    clear: both;
    margin-top: 20px;
    margin-left: 70px;
    overflow: hidden;

    > div {
      width: 100px;
      text-align: center;
      float: left;
      margin-right: 20px;
      cursor: pointer;
      position: relative;

      .fileImg {
        width: 100px;
        height: 80px;
        border-radius: 4px; // 添加圆角
      }

      p {
        font-size: 13px;
      }

      .cover {
        width: 100%;
        height: 80px;
        background-color: rgba(0, 0, 0, 0.4);
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 4px; // 添加圆角
      }

      .delete {
        width: 18px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -9px;
        margin-top: -9px;
        display: block;
      }
    }

    > div:hover {
      .delete {
        display: block;
      }
    }
  }
}

.situation {
  width: 1140px;
  margin: 0 auto;
  padding: 30px;
  background-color: white;
  margin-top: 30px;
  border-radius: 4px; // 添加圆角
  box-shadow: none; // 去掉阴影

  .subtitle {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px; // 增加下边距
  }

  .situationBox {
    margin-left: 70px;
    margin-top: 30px;
    width: 50%;

    > div {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      line-height: 28px;

      > div {
        width: 30%;
        font-size: 12px;
      }
    }
  }
}

.section {
  width: 1140px;
  padding: 30px;
  background-color: white;
  margin: 30px auto;
  position: relative;
  height: 270px;
  border-radius: 4px; // 添加圆角
  box-shadow: none; // 去掉阴影

  > p {
    font-size: 14px;
    margin: 0;
  }

  .content {
    width: 50%;
    position: absolute;
    left: 90px;
    top: 30px;
    display: flex;
    justify-content: space-around;

    > div {
      width: 30%;
      height: 270px;
      border: 1px solid #b9b9b9;
      text-align: center;
      position: relative;
      border-radius: 4px; // 添加圆角

      img {
        width: 30px;
        margin-top: 20px;
        margin-bottom: 10px;
      }

      p {
        font-size: 12px;
        margin: 0;
      }

      .content {
        font-size: 12px;
        text-align: left;
        color: #666;
        width: 90%;
        position: absolute;
        left: 5%;
        top: 110px;
      }
    }
  }
}

.discount {
  width: 1140px;
  margin: 0 auto;
  padding: 30px;
  background-color: white;
  margin-top: 30px;
  border-radius: 4px; // 添加圆角
  box-shadow: none; // 去掉阴影
  overflow: hidden;

  .code {
    float: left;
    width: 30%;

    .el-input-group__append {
      padding-left: 0 !important;
    }

    .el-button {
      margin-left: 0 !important;
    }
  }

  .subtitle {
    font-size: 14px;
    margin-right: 14px;
  }

  .situationBox {
    margin-left: 70px;
    margin-top: 30px;
  }
}

.save {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 50px;
  margin-top: 20px;
  position: relative;

  .btn {
    width: 120px;
    height: 42px;
    text-align: center;
    box-sizing: border-box;
    background-color: #53b7d7; // 按钮背景色
    border: none; // 去掉边框
    color: white; // 按钮文字颜色
    margin-left: 98px;
    margin-top: 20px;
    border-radius: 4px; // 添加圆角
    transition: background-color 0.3s; // 添加过渡效果

    &:hover {
      background-color: #4299b1; // 悬停时的背景色
    }
  }

  .foot {
    text-align: left;
    margin-left: 99px;
    font-size: 14px;
  }

  .howmuch {
    position: absolute;
    left: 240px;
    top: 37px;
    color: #666;
    letter-spacing: 2px;

    > span:nth-child(1) {
      letter-spacing: 0px;
      font-size: 30px;
      color: red;
    }

    > span:nth-child(2) {
      margin-left: 30px;
    }
  }
}

.insertBtn {
  margin-bottom: 10px;
  float: right;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>